<template>
  <label>
    <el-input
      placeholder="请输入内容"
      v-model="search"
      class="search"
      clearable>
    </el-input>
    <el-button type="primary" class="el-icon-search" @click="loadData">&nbsp;&nbsp;搜索</el-button>
    <el-button type="primary" class="el-icon-document-add" @click="handleAdd">&nbsp;&nbsp;添加</el-button>
    <el-table
      border
      empty-text="没有数据"
      :data="tableData"
      style="width: 100%">

      <el-table-column
        label="编号"
        align="center"
        prop="id">
      </el-table-column>
      <el-table-column
        label="时间"
        align="center"
        prop="date">
      </el-table-column>
      <el-table-column
        label="姓名"
        align="center"
        prop="firstName">
      </el-table-column>
      <el-table-column
        label="地址"
        align="center"
        prop="address">
      </el-table-column>
      <el-table-column
        label="state"
        align="center"
        prop="state">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">Edit
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页条-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--    编辑框-->
    <el-dialog :title="isEdit?'修改':'新增'" :visible.sync="dialogFormVisible" width="500px" center="true">
      <el-form ref="ruleForm" :model="updateForm" :rules="rules">
<!--        <el-upload-->
<!--          class="avatar-uploader"-->
<!--          action="localhost:8080/upload/images"-->
<!--          :show-file-list="false"-->
<!--          :on-success="handleAvatarSuccess"-->
<!--          :before-upload="beforeAvatarUpload">-->
<!--          <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
<!--          <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--        </el-upload>-->
        <el-form-item prop="firstName" label="名字" :label-width="formLabelWidth">
          <el-input v-model="updateForm.firstName"></el-input>
        </el-form-item>
        <el-form-item prop="address" label="地址" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="updateForm.address"></el-input>
        </el-form-item>
        <el-form-item prop="state" label="地址" :label-width="formLabelWidth">
          <el-select type="textarea"
                     v-model="updateForm.state">
            <el-option
              v-for="state in states"
              :key="state"
              :label="state"
              :value="state">
              <span style="float: left">{{ state }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdate()">确 定</el-button>
      </div>
    </el-dialog>
  </label>
</template>

<script>
  export default {
    name: 'GoodsList',
    data () {
      return {
        tableData: [],
        search: '',
        size: 10,
        total: 0,
        currentPage: 1,
        dialogFormVisible: false,
        updateForm: {
          address: '',
          date: '',
          firstName: '',
          state: ''
        },
        isEdit: false,
        formLabelWidth: '100px',
        states: ['Alabama', 'Alaska', 'Arizona',
          'Arkansas', 'California', 'Colorado',
          'Connecticut', 'Delaware', 'Florida',
          'Georgia', 'Hawaii', 'Idaho', 'Illinois',
          'Indiana', 'Iowa', 'Kansas', 'Kentucky',
          'Louisiana', 'Maine', 'Maryland',
          'Massachusetts', 'Michigan', 'Minnesota',
          'Mississippi', 'Missouri', 'Montana',
          'Nebraska', 'Nevada', 'New Hampshire',
          'New Jersey', 'New Mexico', 'New York',
          'North Carolina', 'North Dakota', 'Ohio',
          'Oklahoma', 'Oregon', 'Pennsylvania',
          'Rhode Island', 'South Carolina',
          'South Dakota', 'Tennessee', 'Texas',
          'Utah', 'Vermont', 'Virginia',
          'Washington', 'West Virginia', 'Wisconsin',
          'Wyoming'],
        rules: {
          firstName: [
            {required: true, message: '请输入名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
          ],
          address: [
            {required: true, message: '请选择活动区域', trigger: 'change'}
          ],
          state: {
            required: true, message: '请选择', trigger: 'change'
          }
        }
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {

        return true;
      },
      handleSizeChange (val) {
        this.size = isNaN(val)?10:val
      },
      handleCurrentChange (val) {
        this.currentPage = isNaN(val)?1:val
      },
      loadData () {
        this.$http.get('/tableData?firstName_like=' + this.search + '&_page=' + this.currentPage + '&_limit=' + this.size).then(resp => {
          this.tableData = resp.data
          this.total = parseInt(resp.headers['x-total-count'])
        })
      },
      handleEdit (index, row) {
        this.isEdit = true
        this.$http.get('/tableData/' + row.id).then(res => {
          this.updateForm = res.data
          this.dialogFormVisible = true
        })
      },
      handleUpdate () {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            let url = '/tableData/'
            if (!this.isEdit) {
              this.updateForm.date = new Date()
            } else {
              url += this.updateForm.id
            }
            this.$http({
              url: url,
              headers: {
                'Content-Type': 'application/json'
              },
              method: this.isEdit ? 'put' : 'post',
              data: this.updateForm,
            }).then(res => {
              this.$message.success('保存成功！')
              this.dialogFormVisible = false
              this.loadData()
            }).catch(() => {
              this.$message.error('保存失败！')
            })
          } else {
            this.$message.error('请输入正确的数据！')
            return false
          }
        })

      },
      handleDelete (index, row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete('/tableData/' + row.id).then(res => {
            this.$message.success('删除成功！')
            this.loadData()
          }).catch(() => {
            this.$message.error('删除失败！')
          })
        })
      },
      handleAdd () {
        this.isEdit = false
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].resetFields()
        })
      }
    },
    watch: {
      currentPage () {
        this.loadData()
      },
      size () {
        this.loadData()
      },
      search () {
        // this.loadData()
      }
    }
  }
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px solid red;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }


  .el-input, .el-select {
    width: 240px;
  }

  .el-textarea {
    width: 240px;
  }

  .header {
    line-height: 20px;
    height: 100px;
  }

  .add {
    text-align: right;
  }

  .search {
    margin: 0 10px 20px 0;
  }

  .el-pagination {
    text-align: center;
    margin: 10px;
  }
</style>
